<template>
  <el-container class="container">
    <div class="search-box">
      <span>已兑现档案表</span>
      <div class="export">
        <el-button @click="exportExcel" type="primary">导出Excel<i class="el-icon-download"></i></el-button>
      </div>

      <div class="search">
        <el-input v-model="search"></el-input>
        <el-button icon="el-icon-search">搜索</el-button>
        <el-select>
          <el-option></el-option>
          <el-option></el-option>
          <el-option></el-option>
        </el-select>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column label="企业名称" prop="enterpriseName">
      </el-table-column>
      <el-table-column label="法人" prop="legalPerson"> </el-table-column>
      <el-table-column label="联系电话" prop="enterprisePhone">
      </el-table-column>
      <el-table-column label="企业地址" prop="enterpriseAddress">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>

    <el-drawer title="详细信息" size="35%" :visible.sync="drawer" :with-header="false">
      <el-form ref="form" v-model="form" label-width="160px">
        <el-form-item label="公司名称">
          <el-input v-model="form.enterpriseName"></el-input>
        </el-form-item>
        <el-form-item label="企业性质">
          <el-input v-model="form.enterprisePrope"></el-input>
        </el-form-item>
        <el-form-item label="企业类型">
          <el-select v-model="form.enterpriseType" style="width: 230px">
            <el-option label="--请选择企业类型--" value=""></el-option>
            <el-option label="工业企业" value="工业企业"></el-option>
            <el-option label="服务业企业" value="服务业企业"></el-option>
            <el-option label="批发零售企业" value="批发零售企业"></el-option>
            <el-option label="住宿餐饮企业" value="住宿餐饮企业"></el-option>
            <el-option label="建筑业企业" value="建筑业企业"></el-option>
            <el-option label="房地产开发企业" value="房地产开发企业"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业法人">
          <el-input v-model="form.legalPerson"></el-input>
        </el-form-item>

        <el-form-item label="注册资本(万)">
          <el-input v-model="form.registeredCapit"></el-input>
        </el-form-item>

        <el-form-item label="企业注册时间">
          <el-date-picker v-model="form.registeredTime"></el-date-picker>
        </el-form-item>

        <el-form-item label="统一社会信用编码">
          <el-input v-model="form.creditCode"></el-input>
        </el-form-item>
        <el-form-item label="企业电话">
          <el-input v-model="form.enterprisePhone"></el-input>
        </el-form-item>
        <el-form-item label="企业住址">
          <el-input v-model="form.enterpriseAddress"></el-input>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" auto-upload="false" show-file-list="true"
            :file-list="list" :limit="2">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即修改</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      search: "",
      drawer: false,
      form: [],
      list: [
        {
          url: "http://ri54fk82c.hd-bkt.clouddn.com/pictures/userId:9_test.jpg",
        },
        {
          name: "xxxxx",
          rul: "http://ri54fk82c.hd-bkt.clouddn.com/pictures/userId:9_test.jpg",
        },
      ],

      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  mounted() {
    //TODO:axios发送请求
    let _data = [
      {
        enterpriseName: "xx公司",
        enterprisePrope: "私营企业",
        enterpriseType: "工业企业",
        legalPerson: "王小虎1",
        registeredCapit: "2000",
        registeredTime: "2016-05-04",
        creditCode: "1234567890qwertyui",
        enterpriseAddress: "上海市普陀区金沙江路 1517 弄",
        enterprisePhone: "18779633910",
      },
      {
        enterpriseName: "xx公司",
        enterprisePrope: "私营企业",
        enterpriseType: "工业企业",
        legalPerson: "王小虎2",
        registeredCapit: "2000",
        registeredTime: "2016-05-04",
        creditCode: "1234567890qwertyui",
        enterpriseAddress: "上海市普陀区金沙江路 1517 弄",
        enterprisePhone: "18779633910",
      },
      {
        enterpriseName: "xx公司",
        enterprisePrope: "私营企业",
        enterpriseType: "工业企业",
        legalPerson: "王小虎3",
        registeredCapit: "2000",
        registeredTime: "2016-05-04",
        creditCode: "1234567890qwertyui",
        enterpriseAddress: "上海市普陀区金沙江路 1517 弄",
        enterprisePhone: "18779633910",
      },
      {
        enterpriseName: "xx公司",
        enterprisePrope: "私营企业",
        enterpriseType: "工业企业",
        legalPerson: "王小虎4",
        registeredCapit: "2000",
        registeredTime: "2016-05-04",
        creditCode: "1234567890qwertyui",
        enterpriseAddress: "上海市普陀区金沙江路 1517 弄",
        enterprisePhone: "18779633910",
      },
    ];
    this.tableData = _data;
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleEdit(index, row) {
      console.log(index, row);
      this.drawer = true;
      this.form = this.tableData[index];
    },
    handleDelete(index, row) {
      //TODO:传递数据给后端，同时刷新页面
      this.tableData.splice(index, 1);
      // console.log(index, row);
    },
    cancel() {
      this.drawer = false;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: #ddd;
  padding: 30px;
  display: flex;
  flex-direction: column;

  .page {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-box {
    width: 100%;
    height: 60px;
    display: flex;
    margin-bottom: auto;
    align-items: center;
  }

  .export {
    margin-left: auto;
    margin-right: auto;
  }

  .search {
    margin-left: auto;
    margin-bottom: auto;
    display: flex;

    .el-button {
      margin-left: 10px;
    }
  }
}
</style>